<template>
  <!-- 侧边栏自我介绍 -->
  <div class="card-widget card-info">
    <!-- 默认样式一 -->
    <div class="card-content">
      <div class="card-info-avatar is-center">
        <div class="author-info__top-group">
          <div class="author-info__sayhi" id="author-info__sayhi" @click="changeSayHelloText">
            {{ message }}
          </div>
        </div>
      </div>
      <div class="avatar-img-group">
        <img class="avatar-img" alt="avatar" :src="siteInfo.logo ? siteInfo.logo : '/src/assets/images/404s.gif'"/>
        <div class="avatar-sticker">
          <img class="avatar-sticker-img" alt="avatar" src="/src/assets/images/omxo3N22290781690363822143.png"/>
        </div>
      </div>
      <div class="author-info__description_group">
        <div style="line-height: 1.38; margin: 0.6rem 0; text-align: justify; color: rgba(255, 255, 255, 0.8);"
             v-html="authorInfo.asideInfo.slogan">
        </div>
        <div style="line-height: 1.38; margin: 0.6rem 0; text-align: justify; color: rgba(255, 255, 255, 0.8);"
             v-html="authorInfo.asideInfo.description">
        </div>
      </div>
      <div class="author-info__bottom-group">
        <a class="author-info__bottom-group-left" href="javascript:void(0);" @click="toPath(authorInfo.aboutPath)">
          <div class="author-info__name">{{ authorInfo.author }}</div>
          <div class="author-info__desc">{{ authorInfo.slogan }}</div>
        </a>
        <div class="card-info-social-icons is-center">
          <a class="social-icon" rel="external nofollow" target="_blank" href="javascript:void(0);"
             @click="hrefClick('https://github.com/liuzhihang')" title="github">
            <i class="haofont hao-icon-github"></i>
          </a>
          <a class="social-icon" rel="external nofollow" target="_blank" href="javascript:void(0);"
             @click="hrefClick('https://www.yuque.com/liuzhihang')" title="语雀">
            <i class="haofont hao-icon-yuque"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";
import {useRouter} from 'vue-router';
import store from "../../store/index.js";

const message = ref("你好啊！");
const lastSayHello = ref("");
const router = useRouter();
const siteInfo = computed(() => store.state.data.siteInfo);
const authorInfo = computed(() => store.state.data.authorInfo);
const helloMessageList = computed(() => store.state.data.asideMessageList);

const hrefClick = (href) => {
  window.open(href);
}

const toPath = (path) => {
  router.push(path)
}

const changeSayHelloText = () => {
  // 如果只有一个问候语，设置为默认值
  if (helloMessageList.value.length === 1) {
    message.value = helloMessageList.value[0].content;
    return;
  }
  let randomGreeting = helloMessageList.value[Math.floor(Math.random() * helloMessageList.value.length)];
  for (; randomGreeting === lastSayHello;)
    randomGreeting = helloMessageList.value[Math.floor(Math.random() * helloMessageList.value.length)];
  message.value = randomGreeting.content;
  lastSayHello.value = randomGreeting.content;
}

onMounted(() => {
  changeSayHelloText();
});
</script>

<style scoped>
.card-info-avatar.is-center {
  flex-direction: column;
  display: flex;
  align-items: flex-start
}

#aside-content .card-info img.avatar-img {
  width: 118px;
  right: 0;
  top: 0;
  border-radius: 500px;
  position: absolute;
  opacity: 1;
  transition: .3s;
  border: 5px solid var(--heo-white);
  overflow: hidden
}

.page #aside-content .card-info img.avatar-img {
  border-color: var(--heo-card-bg)
}

.author-info__top-group {
  display: flex;
  height: 28px;
  width: 100%
}

.author-info__desc {
  font-size: 12px;
  color: var(--heo-white);
  opacity: .6;
  line-height: 1
}

.avatar-img-group {
  width: 118px;
  height: 118px;
  right: calc(50% - 59px);
  top: 90px;
  border-radius: 500px;
  position: absolute;
  transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
  transform-origin: bottom
}

#aside-content .card-info:hover .avatar-img-group {
  opacity: 0;
  transform: scale(0)
}

.author-info__bottom-group {
  display: flex;
  justify-content: space-between;
  position: absolute;
  padding: 1.2rem;
  width: 100%;
  left: 0;
  bottom: 0;
  align-items: center
}

a.author-info__bottom-group-left:hover {
  opacity: .8
}

#aside-content .card-info .card-info-social-icons {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  cursor: pointer
}


#aside-content .card-info .card-info-social-icons i:hover {
  transform: rotate(540deg);
  background-color: #000;
  cursor: pointer
}

#aside-content .card-info .card-info-social-icons .social-icon {
  margin: 0;
  margin-left: 8px
}

#aside-content .card-info .card-info-social-icons i {
  background: var(--heo-white-op);
  color: var(--heo-white);
  font-size: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center
}

#aside-content .card-info .card-info-social-icons i:hover {
  background: var(--heo-white);
  transform: scale(1.1);
  color: var(--heo-main);
  box-shadow: none
}

[theme_mode=dark] .page #aside-content .card-info .card-info-social-icons i {
  background: var(--heo-black-op);
  color: var(--heo-card-bg)
}

[theme_mode=dark] .page #aside-content .card-info .card-info-social-icons i:hover {
  background: var(--heo-card-bg);
  color: var(--heo-fontcolor)
}

#aside-content .card-info .banner-button {
  height: 40px;
  width: 118px;
  border-radius: 20px;
  justify-content: center
}

@media screen and (min-width: 1300px) {
  #aside-content .card-info .card-info-social-icons i {
    color: var(--heo-white)
  }

  [theme_mode=dark] .page #aside-content .card-info .card-info-social-icons i {
    color: var(--heo-card-bg)
  }
}

#aside-content .card-info .card-info-data > .card-info-data-item:hover {
  background: var(--heo-post-blockquote-bg);
  transform: scale(.97)
}

#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline, #aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
  color: var(--heo-blue)
}

.author-info__description_group {
  position: absolute;
  top: 50px;
  width: 100%;
  left: 0;
  padding: 1.2rem;
  opacity: 0;
  transition: .3s
}

.card-widget:hover .author-info__description_group {
  opacity: 1
}

.author-info__description2 {
  line-height: 1.38;
  margin: .3rem 0;
  text-align: justify;
  width: 100%;
  z-index: 2;
  color: rgba(255, 255, 255, .8)
}

.author-info__description2 b {
  color: var(--heo-white)
}

div#author-info__sayhi {
  text-align: center;
  width: fit-content;
  color: var(--heo-white);
  background: var(--heo-white-op);
  font-size: 12px;
  margin-right: auto;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  transition: .3s;
  margin: auto;
  min-width: 100px
}

div#author-info__sayhi:hover {
  background: var(--heo-white);
  color: var(--heo-main);
  transform: scale(1.1)
}

[theme_mode=dark] .page div#author-info__sayhi {
  background: var(--heo-black-op);
  color: var(--heo-black)
}

#aside-content .card-info .author-info__name {
  text-align: left;
  font-weight: 700;
  color: var(--heo-white);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 5px
}

.page #aside-content .card-info .author-info__name, .page .author-info__desc {
  color: var(--heo-card-bg)
}

.author-info__desc {
  font-size: 12px;
  color: var(--heo-white);
  opacity: .6;
  line-height: 1
}

.author-info__description {
  line-height: 1.38;
  margin: .3rem 0;
  text-align: justify;
  color: var(--heo-white);
  opacity: 1
}

.page .author-info__description {
  color: var(--heo-card-bg)
}

.author-info__description b {
  color: var(--heo-white);
  opacity: 1
}

.page .author-info__description b {
  color: var(--heo-card-bg);
  opacity: 1
}

.avatar-sticker {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 33px;
  height: 33px;
  line-height: 34px;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease-out .2s;
  transform: scale(1);
  background: var(--heo-white);
  border-radius: 50%
}

.page .avatar-sticker {
  background: var(--heo-card-bg)
}

.avatar-sticker img {
  width: 26px;
  height: 26px
}

.card-widget:hover .avatar-sticker {
  opacity: 0;
  transform: scale(0)
}

.author-info__description b {
  color: var(--heo-white);
}

#aside-content > .card-widget.card-info::before {
  background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
  background-size: 400%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: '';
  animation: gradient 15s ease infinite;
}
</style>
